<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ include file="/common/common.jsp" %>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>进货单支付</title>
    <link href="${ctx}/static/css/basic.css" rel="stylesheet" type="text/css" />
    <link href="${ctx}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="${ctx}/static/plugins/layer/skin/default/layer.css" rel="stylesheet" type="text/css"/>
    <link href="${ctx}/static/plugins/validationEngine/css/validationEngine.jquery.css" rel="stylesheet" type="text/css">
    
    <style type="text/css">
        .wrapper{width: 100%;}
        .content{width: 1000px;margin: 0 auto;  }
        .pay_title{height: 60px;background: rgba(220,215,215,0.5);border: 3px solid #fff;border-radius:6px;margin-top: 60px;}
        .pay_title span{font-size: 20px;font-weight: 200;  line-height: 56px;  margin-left: 15px;}
        .pay_title em{color: red;font-size: 24px;}
        .pay_content{height: 300px;background: #fff;}
        .pay_content h4{margin: 40px 15px auto 15px;}
        .balance,.thirdPay{margin: 30px 0;font-size: 16px;}
        .payType {display: inline-block;color: #3c3c3c;vertical-align: baseline;font-weight: 200;padding-top: 6px;margin-left: 40px;}
        .selected {border-color: #f40;background-color: #fff0e8;margin: 5px 0 7px;line-height: 32px;box-shadow: 5px 5px 0 #f3f3f3;}
        .available{float: right;padding-top: 6px; margin-right: 200px;}
        .available em{color: red;font-size: 18px;}
        .pay_btn{margin-top: 60px;}
        .passwordForm{ width: 50%;margin-left: 40px;margin-top: 40px;}
        .forgetPsw{padding: 8px 30px;border-radius: 4px;margin: 0 10px;font-size: 16px;}
    </style>
</head>
<body>
<div class="wrapper">
    <div class="content">
        <div class="pay_title">
            <span>付款总额<em>${oder.totalCost }</em>元，请尽快付款，以便订单及时处理。</span>
        </div>
        <div class="pay_content">
            <h4>请选择支付方式</h4>
            <hr>
            <div class="balance">
                <label class="payType" for="balancePay">
                    <input id="balancePay" type="radio" class="radioSelect pay_password" name="payType" value="0">
                    <span>余额支付</span>
                </label>
                <span class="available">可用余额<em>${balance }</em> 元</span>
                <input type="hidden" name="balance" id="balance" value="${balance}">
            </div>
            <div class="thirdPay">
                <label class="payType" for="thirdPay">
                    <input id="thirdPay" type="radio" class="radioSelect" name="payType" value="1">
                    <span>第三方支付</span>
                </label>
            </div>
            <form action="" id="validateForm">
            <div class="payPassword" style="display: none;">
                <h4>请输入支付密码</h4>
                <hr>
                <input type="password" id="pwd" class="form-control passwordForm  validate[required]" placeholder="请输入支付密码">
            	  <span style="display: block;margin-left: 540px;margin-top: -28px;">
                    <a class="forgetPsw" href="${ctx}/api/safeManage/safeManagePage?pay=pay">没有设置支付密码？现在就去</a>
                </span>
            	<input type="hidden" name="id" id="id" value="${oder.id }">
            	<input type="hidden" name="roleCode" id="roleCode" value="${roleCode }">
            </div>
            </form>
        </div>
        <div class="pay_btn text-center">
            <button class="btn btn-primary" id="pay">立即支付</button>
        </div>
        <form action="${ctx}/api/pay/payeco" id="payForm" method="post" target="_blank"><!-- 第三方支付 -->
        	<input type="hidden" name="orderNum" id="orderNum" value="${oder.orderNo }">
        	<input type="hidden" name="amount" id="amount" value="${oder.totalCost }">
        </form>
    </div>
</div>
<script src="${ctx}/static/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script src="${ctx}/static/plugins/layer/layer.js"></script>
<script src="${ctx}/static/plugins/validationEngine/jquery.validationEngine-zh_CN.js"></script>
<script src="${ctx}/static/plugins/validationEngine/jquery.validationEngine.js"></script>
<script src="${ctx}/static/plugins/md5/jquery.md5.js"></script>
<script type="text/javascript">
$(function(){
   $(".radioSelect").click(function () {
        $(this).parent().parent().siblings().removeClass("selected");
        $(this).parent().parent().addClass("selected");
    });
    $("#balancePay").click(
        function () {
            $(".payPassword").css("display", "block");
        });
    $("#thirdPay").click(
        function () {
            $(".payPassword").css("display", "none");
        });
    
    
    $("#pay").click(function(){
    	var type = $('input:radio:checked').val();//0余额; 1第三方支付
    	if(type == null){
    		layer.msg("请选择支付方式",{time: 1000});
    		return false;
    	}
    	var roleCode = $("#roleCode").val()
    	if(type == 0){
    		if($("#balance").val() <= 0){
        		layer.msg("账户余额不足",{icon: 2, time: 1000});
        		return false;
        	}
    		//余额支付
    		var flag = $("#validateForm").validationEngine("validate");
	    	if(!flag){
	     		return false;
	    	} 
	    	var pwd = $.md5($("#pwd").val());
	    	var url = "";
	    	if(roleCode == 3){
	    		//市级代理
	    		url = "${ctx}/api/forOrderPayment/agentBalancePay";
	    	}else if(roleCode == 6){
	    		//商户
	    		url = "${ctx}/api/forOrderPayment/merchatBalancePay";
	    	}
	    	$.ajax({
	       		async       : false,
	       		type 		: "POST",
	       	    url		    : url,
	       		data 		: {orderId : $("#id").val(), passWord: pwd},
	       		success 	: function( d ) {
	       			if(d.code == 200){
	       				layer.msg('支付成功',{icon: 1, time: 2000},
	       						function(index){
	   		            	if(roleCode == 3){
		   		 	    		//市级代理 进货订单列表
		   		 	    		window.location.href="${ctx}/api/agentOrder/list";
		   		 	    	}else if(roleCode == 6){
		   		 	    		//商户 进货订单列表
		   		 	    		window.location.href="${ctx}/api/merchantOrder/list";
		   		 	    	}
	   		            });
	       			} else {
	       				layer.msg(d.message,{icon: 2});
	       			}
	       		}
	       	});
    	}else{
    		//第三方支付
    		$("#payForm").submit();
    		var toUrl = "";
   			if(roleCode == 3){
 	    		//市级代理 进货订单列表
 	    		toUrl="${ctx}/api/agentOrder/list";
 	    	}else if(roleCode == 6){
 	    		//商户 进货订单列表
 	    		toUrl="${ctx}/api/merchantOrder/list";
 	    	}
    		layer.confirm('支付完成',{
	            icon: 1,
	            btn: ['支付成功', '支付遇到问题'],
	            btn1: function(index){
	            	window.location.href = toUrl;
	            },
	            btn2: function(index){
	            	window.location.href = toUrl;
	            }
	        });
    		
    	}
    	
    	
    });
})
 
    
    
</script>
</body>
</html>